---
title: Guidelines
redirect_from:
  - /components/illustration/
---

import IllustrationList from "../../../../components/IllustrationList";

import IllustrationTypesSnippet from "snippets/illustration-types.mdx";
import IllustrationNonvisualSnippet from "snippets/illustration-nonvisual.mdx";

<ReactExample exampleId="Illustration-default" />

## When to use

- To provide visual context.
- To lead users to the next step in a flow.
- With all essential information in text to be [accessible to everyone](/foundation/accessibility/).

## When not to use

- For visual context for specific airports---use an [airport illustration](/components/visuals/airportillustration/).

## Component status

<ComponentStatus component="Illustration" />

## Content structure

![Image: adds emotion to your message.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:0%3A265)

## Content

<IllustrationNonvisualSnippet />

<GuidelineImages>

<DoImage>

![A picture with alternative text underneath: Tell us how you feel about the app.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:71%3A986)

Use meaningful alt text.

</DoImage>

<DontImage>

![A picture with alternative text underneath: A man and a woman stand next to a bench with the woman's thumb pointing down and man's thumb pointing up.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:71%3A981)

Don't include unnecessary information that distracts from the main idea.

</DontImage>

</GuidelineImages>

## Look & feel

### Illustration types

<IllustrationTypesSnippet />

### Available illustrations

<IllustrationList />
